<template>

	<view class="trends-list-li">

		<view class="trends-content" :class="{
			'trends-content-border':border
		}">
			<view class="trends-list-li-header header-content-gap">
				<view class="trends-list-li-header-left ">

					<template v-if="flat">
						<wd-icon name="thin-arrow-left" size="35rpx" @click="clickBack"></wd-icon>
					</template>

					<userAvatar radius="50%" :src="data.userInfo.avatar" :size="60" @click="clickUserAvatar">
					</userAvatar>
				</view>
				<view class="trends-list-li-header-right">
					<view class="trends-list-li-header-userInfo">
						<userName showGender fontSize="25rpx" :username="data.userInfo.nickname"
							:gender="data.userInfo.gender">
						</userName>
						<text class="ago-text">{{TimeAgoDiff(data.create_time)}}</text>
					</view>
					<!-- 打招呼按钮 -->
					<view class="greet-button">
						<text>关注</text>
					</view>
					<view class="trends-list-li-header-options" @click="clickReport">
						<wd-icon name="more1" :size="Data.iconSize" :color="iconNormalColor"></wd-icon>
					</view>
				</view>
			</view>
			<view class="trends-list-li-content header-content-gap" :class="{
				'trends-list-li-content-padding':true
			}">
				<view class="trends-list-li-content-left header-content-left" @click="clickDynamic" v-if="!flat"></view>
				<view class="trends-list-li-content-right">
					<!-- 文本内容 -->
					<view class="trends-text-value">{{data.value}}</view>
					<!-- 图片 -->
					<ImagesList :dataList="data.imagesList"></ImagesList>
					<!-- 帖子话题 -->
					<!-- <TopicVue></TopicVue> -->
					<!-- 帖子定位 -->
					<!-- <locationVue></locationVue> -->
					<!-- 帖子操作项 -->
					<optionsVue :data="data" @fover="clickForver(data)"></optionsVue>
					<!-- 用户评论 -->
					<!-- <userCommentVue></userCommentVue> -->
					<!-- 查看评论 -->
					<!-- <lookCommentVue></lookCommentVue> -->
					<!-- 发布时间 -->
					<!-- <AgoTimeVue v-if="flat" :text="data.ago_time"></AgoTimeVue> -->
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import TimeAgoDiff from '@/utool/TimeAgoDiff';
	import useTrendsStore from '@/stores/store/trends.js'
	const TrendsStore = useTrendsStore()
	import AgoTimeVue from './components/ago_time.vue';
	import userCommentVue from './components/user_comment.vue'
	import optionsVue from './components/options.vue';
	import lookCommentVue from './components/look_comment.vue';
	import TopicVue from './components/topic.vue';
	import locationVue from './components/location.vue';
	import ImagesList from '@/components/Z-Image-List/Z-Image-List.vue'
	import userGenderIcon from '@/components/user_gender_icon/user_gender_icon.vue'
	import userName from '@/components/user_name_text/user_name_text.vue';
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	const Props = defineProps({
		showUserInfo: {
			typeof: Boolean,
			default: true
		},
		flat: {
			typeof: false,
		},
		data: {
			typeof: Object,
			default: {}
		},
		index: {
			typeof: String || Number,
			default: null
		},
		userInfo: {
			typeof: Object,
			default: {}
		},
		showComment: {
			typeof: Boolean,
			default: true
		},
		border: {
			typeof: Boolean,
			default: true
		},
		AvatarSize: {
			typeof: String || Number,
			default: 60
		},
		AvatarRadius: {
			typeof: String || Number,
			default: "50%"
		}
	})
	import {
		computed,
		ref,
		reactive
	} from 'vue'
	import useUserStore from '@/stores/store/user.js'
	const userStore = useUserStore()
	const userInfo = computed(() => userStore.userInfo)
	const Data = reactive({
		iconNormalColor: "#cad7e2",
		iconSize: "34rpx",
		// 点赞图片配置
		FoverIcon: {},
		// 评论图标配置
		CommentIcon: {},
		// 打招呼图标配置
		GreetIcon: {}
	})
	const Emits = defineEmits(["clickDelete", "clickDynamic", "clickUserAvatar", "clickFover", "clickReport", "clickGreet",
		"clickLookComment", "clickComment"
	])
	let data = Props.data
	let index = Props.index

	function clickDynamic() {
		Emits("clickDynamic", data, index)
	}

	function clickUserAvatar() {
		Emits("clickUserAvatar", data, index)
	}

	function clickReport() {
		Emits("clickReport", data, index)
	}

	function clickGreet() {
		Emits("clickGreet", data, index)
	}

	function clickForver(data) {
		TrendsStore.DynamicFover(data)
	}

	function clickLookComment() {
		Emits("clickLookComment", data, index)
	}

	function clickComment() {
		Emits("clickComment", data, index)
	}

	function clickDelete() {
		Emits("clickDelete", data, index)
	}

	// 点击返回
	function clickBack() {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.trends-list-li {
		width: 100%;
		background-color: white;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		padding-top: 10rpx;

		&-header {
			width: 100%;
			display: flex;
			gap: 27rpx;

			&-left {
				padding-top: 10rpx;
				display: flex;
				align-items: center;
				gap: 20rpx;
			}

			&-right {
				display: flex;
				align-items: center;
				gap: 25rpx;
				flex: 1;
			}
		}
	}

	.trends-content {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;

		&-border {
			border-bottom: 1rpx solid #bcbcbc22;
		}

		&-padding {}

	}

	.header-content-left {
		width: 90rpx;
	}

	.trends-list-li-header-userInfo {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 3rpx;
	}

	.trends-list-li-header-options {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
	}

	.greet-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 45rpx;
		font-size: 24rpx;
		border: 1rpx solid #919191;
		color: #919191;
		border-radius: 10rpx;
	}

	.look-comment,
	.ago-text {
		color: #9ba5ad;
	}

	.ago-text {
		font-size: 20rpx;
	}

	.user-comment-input,
	.look-comment,
	.greet-text,
	.delete-text {
		font-size: 25rpx;
	}

	.username-text {}

	.greet-text {}

	.delete-text {}

	.trends-text-value {
		font-size: 25rpx;
		margin-bottom: 15rpx;
	}

	.trends-list-li-content {
		display: flex;

		&-left {}

		&-right {
			flex: 1;
		}

		&-padding {
			padding: 25rpx 0rpx;
			padding-bottom: 25rpx;
		}
	}



	.user-comment {
		display: flex;
		gap: 25rpx;
		margin-bottom: 10rpx;
		height: 0rpx;
		padding-top: 10rpx;
		transition: 130ms all linear;
		overflow: hidden;
		margin-bottom: 15rpx;

		&-show {
			height: 75rpx;
			margin-bottom: 15rpx;
		}

		&-hide {
			height: 0rpx;
			overflow: hidden;
			margin-bottom: 0rpx;
		}

	}

	.user-comment .user-comment .user-comment-input {
		flex: 1;
		height: 100%;
		background: #dce3ea2e;
		text-indent: 20rpx;
		border-radius: 38rpx;
		overflow: hidden;
	}

	.look-comment {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 15rpx;
	}
</style>